import React, { memo } from 'react'

import { Upload, message } from 'antd'
import { LoadingOutlined, CameraOutlined } from '@ant-design/icons'

import { getToken } from '@/utils'

// antd提供的文件类型声明
// 这个声明的可重用性几乎为零，所以在当前文件中声明即可，不需要在公用声明文件中声明
import { RcFile as OriRcFile } from 'rc-upload/lib/interface'
// 原类型中没有提供最后修改时间的声明，这里需要补充一下
interface RcFile extends OriRcFile {
  readonly lastModifiedDate: Date
}

const baseUrl = process.env.REACT_APP_SAPI
/**
 * 上传前检查
 * @param {*} file
 * @returns
 */
function beforeUpload(file: RcFile) {
  const isJpgOrPng =
    file.type === 'image/jpeg' ||
    file.type === 'image/png' ||
    file.type === 'image/jpg'
  if (!isJpgOrPng) {
    message.error('只可以上传jpg或png文件!')
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    message.error('文件最大不应超过2MB!')
  }
  // 不正确的图片阻止上传
  return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE
}

/**
 * 上传按钮
 * @param {*} props
 * @returns
 */
// 有些声明如果不可重用，可以偷个懒这样写，但要小心会挨骂
function UploadButton(props: { loading?: boolean } = { loading: false }) {
  return <div>{props.loading ? <LoadingOutlined /> : <CameraOutlined />}</div>
}

interface IProps {
  // 来自于form.item
  // 只要是在form.item中使用了子组件，就会默认将这两个参数传入子组件
  value: any
  onChange: any
  maxCount?: number
}
export default memo(function (props: any) {
  const [loading, setLoading] = React.useState(false)
  // 注意这里的onChange方法，所有formItem.children里都会带有这个方法
  // 还有一个id,一个value
  const { value, onChange, maxCount } = props
  // console.log(value, onChange, maxCount)

  /**
   * 单图上传
   */
  const singleChange = React.useCallback(
    ({ file }) => {
      // 上传完成后，调用父组件的onChange方法，将地址上传到表单
      if (file.status === 'done') {
        setLoading(false)
        onChange(`${baseUrl}${file.response.data.src}`)
      } else {
        setLoading(true)
      }
    },
    [onChange]
  )

  /**
   * 多图上传
   */
  const multipleChange = React.useCallback(
    ({ fileList }) => {
      // 上传完成后，调用父组件的onChange方法，将图片列表上传到表单
      onChange(
        fileList.map((item: any) =>
          item.status === 'done'
            ? item.url || `${baseUrl}${item.response.data.src}`
            : item
        )
      )
    },
    [onChange]
  )

  /**
   * 配置设定
   * 如果props中有配置maxCount，表示当前是多图上传
   *
   */
  const config = maxCount
    ? {
        // 如果已有图片存在，将图片传给antd渲染出来
        // 这里的value是图片url组成的数组
        // [img1.jpg, img2.jpg, ...]
        fileList: value
          ? value.map((item: string) =>
              typeof item === 'string'
                ? { uid: item, url: item, status: 'done' }
                : item
            )
          : [],
        maxCount: maxCount,
        showUploadList: true,
        onChange: multipleChange,
        multiple: true,
      }
    : {
        showUploadList: false,
        onChange: singleChange,
      }

  const token = getToken()

  return (
    <Upload
      name="headfile"
      listType="picture-card"
      action={`${baseUrl}/adminapi/file/upload`}
      headers={{ 'Authori-zation': `Bearer ${token}` }}
      data={file => {
        return {
          pid: 0,
          file,
        }
      }}
      // action="http://vueshop.glbuys.com/api/user/myinfo/formdatahead?token=1ec949a15fb709370f"
      beforeUpload={beforeUpload}
      className="bw-upload"
      {...config}
    >
      {
        // 多图
        !maxCount ? (
          !loading && value ? (
            <img src={value} alt="avatar" style={{ width: '100%' }} />
          ) : (
            <UploadButton loading={loading} />
          )
        ) : value && value.length >= props.maxCount ? null : (
          <UploadButton />
        )
      }
    </Upload>
  )
})
